<template>
  <div ref="domRef" id="container" style="height: 100%"></div>
</template>

<script setup lang="ts">
  import * as echarts from 'echarts';
  import { onMounted, ref } from 'vue';
  import { useWindowResize } from '../hook';

  const domRef = ref<HTMLDivElement>();

  onMounted(() => {
    const chart = echarts.init(domRef.value, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });

    const option = {
      radar: [
        {
          axisName: {
            show: true,
            color: 'red'
          },
          indicator: [
            { text: 'Look', max: 100 },
            { text: 'Photo', max: 100 },
            { text: 'System', max: 100 },
            { text: 'Performance', max: 100 },
            { text: 'ad', max: 100 }
          ],
          radius: ['0', '50%'],
          center: ['50%', '55%']
        }
      ],
      series: [
        {
          type: 'radar',
          radarIndex: 0,
          symbolSize: 2,
          lineStyle: {
            color: 'red',
            width: 0.5
          },
          areaStyle: {
            color: 'pink'
          },
          label: {
            color: 'red',
            fontStyle: {
              color: 'red'
            },
            fontWeight: 'bold'
          },
          data: [
            {
              value: [85, 90, 90, 95, 25]
            }
          ]
        }
      ]
    };

    chart.setOption(option);

    useWindowResize(chart.resize);
  });
</script>

<style scoped lang="scss">
 
</style>